<!DOCTYPE html>
<!-- saved from url=(0046)http://www.w3ccafe.com/demo/gmuapp/player.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta charset="utf-8">
    <title>GMU Demos</title>
    <link rel="stylesheet" type="text/css" href="./GMU Demos_files/reset.css">
    <link rel="stylesheet" type="text/css" href="./GMU Demos_files/player.css">
    <link rel="stylesheet" type="text/css" href="./GMU Demos_files/gmu.css">
    <link rel="stylesheet" type="text/css" href="./GMU Demos_files/demo.css">
    <style type="text/css">
        body {
            background: #505050;
        }
    </style>
    <script type="text/javascript" src="./GMU Demos_files/zepto.js"></script>
    <script type="text/javascript" src="./GMU Demos_files/gmu.js"></script><style>.gmu-media-detect{-webkit-transition: width 0.001ms; width: 0; position: absolute; clip: rect(1px, 1px, 1px, 1px);}
@media screen and (width: 1920px) { #gmu-media-detect0 { width: 1px; } }
</style>
    <script type="text/javascript" src="./GMU Demos_files/event.js"></script>
    <script type="text/javascript" src="./GMU Demos_files/widgets.js"></script>
    <script type="text/javascript" src="./GMU Demos_files/player.js"></script>
</head>
<body style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0);">
<hearder class="hearder">
	<h3>播放器</h3>
</hearder>
<div id="">

	<div id="music_box">
		<ul id="MusicList">
			<li class="active">
				<div class="music_info">
					<div class="music_overlay" style="background-image:url(audio/audio-1.jpg)" data-src="1" song-name="Let it go" singe="《冰雪奇缘》"></div>
				</div>
			</li>

			<li>
				<div class="music_info">
					<div class="music_overlay" style="background-image:url(audio/audio-2.jpg)" data-src="2" song-name="GreenPeace Ska" singe="板砖乐队《音渡神游》"></div>
				</div>
			</li>
		</ul>
	</div>


	<!-- 当前播放的音乐 -->
	<div class="nowPlayer">
		<p class="songName" id="CurrentPlayName">准备播放</p>
	</div>
	<!-- 进度条状态 -->
	<div class="ProcessControl">
		<div id="progressbar" class="ui-progressbar-h" style="width: 1728px;"><div class="ui-progressbar-bg"><div class="ui-progressbar-filled"></div><div class="ui-progressbar-button"><div><b></b></div></div></div></div>
		<div class="SongTime l">00:00</div>
		<div class="SongTime r">00:00</div>
	</div>
	<!-- <div class="toolsBar">
		<div><i class="icon-heart"></i><span>favourite</span></div>
		<div><i class="icon-shuffle"></i><span>shuffle</span></div>
		<div><i class="icon-loop-alt1"></i><span>repeat</span></div>
	</div> -->
	<!-- 播放器控制组件 -->
	<div class="PlayControls">
		<!-- 播放按钮 -->
		<div id="play"><i class="icon-play"></i></div>
		<!-- 暂停按钮 -->
		<div id="pause"><i class="icon-pause"></i></div>
		<!-- 下一曲 -->
		<div id="next"><i class="icon-next"></i></div>
		<!-- 上一曲 -->
		<div id="prev"><i class="icon-previous"></i></div>
	</div>
	 
	<!-- 播放器 -->
	<audio id="playMusic" data-src="" data-src-flag=""></audio>
</div>
<script>
	//创建横向组件
    $('#progressbar').progressbar();
   
</script>

<div class="gmu-media-detect" id="gmu-media-detect0"></div></body></html>